import React from 'react';
import { TouchableWithoutFeedback, StyleSheet, Dimensions, StatusBar, Platform } from 'react-native';
import { View, Button, Text, Icon } from 'native-base';
import * as PropTypes from 'prop-types';
import { Metrics, Colors } from '../theme';

export default class Header extends React.Component {
    
    static propTypes = {
        title: PropTypes.string,                // Header标题
        titleStyle: PropTypes.oneOfType([       // Header标题样式
            PropTypes.number,
            PropTypes.object
        ]),

        leftIcon: PropTypes.string,             // HeaderLeft图标
        leftIconSize: PropTypes.number,         // HeaderLeft图标大小
        leftIconColor: PropTypes.string,       // HeaderLeft图标颜色
        leftText: PropTypes.string,             // HeaderLeft文字
        onLeftPress: PropTypes.func,            // HeaderLeft点击事件
        leftStyle: PropTypes.oneOfType([        // HeaderLeft样式
            PropTypes.number,
            PropTypes.object
        ]),

        rightIcon: PropTypes.string,            // HeaderRight图标
        rightIconSize: PropTypes.number,        // HeaderRight图标大小
        rightIconColor: PropTypes.string,       // HeaderRight图标颜色
        rightText: PropTypes.string,            // HeaderRight文字
        onRightPress: PropTypes.func,           // HeaderRight点击事件
        rightStyle: PropTypes.oneOfType([       // HeaderRight样式
            PropTypes.number,
            PropTypes.object
        ]),

        style: PropTypes.oneOfType([            // HeaderRight样式
            PropTypes.number,
            PropTypes.object
        ]),

        backgroundColor: PropTypes.string,     // StatusBar背景色

        isTabBar: PropTypes.bool,               // 是否为Tab界面
        isStatusBarVisible: PropTypes.bool      // 状态栏是否可见
    };

    static defaultProps = {
        title: "",
        titleStyle: {},

        leftIcon: "angle-left",
        leftIconSize: 28,
        leftIconColor: "#FFFFFF",
        leftText: "",
        leftStyle: {},
        onLeftPress: () => {
            // this.props.navigation.goBack();
        },

        rightIcon: "",
        rightIconSize: 28,
        rightIconColor: "#FFFFFF",
        rightText: "",
        rightStyle: {},
        onRightPress: () => {},

        style: {},
        backgroundColor: Colors.subject,

        isTabBar: false,
        isStatusBarVisible: true
    };

    constructor (props) {
        super(props);
        this.state = {
        };
    }

    /**
     * HeaderLeft点击事件
     */
    onLeftPress () {
        // if (!this.props.isTabBar) {
            this.props.onLeftPress();
        // }
    }

    /**
     * 渲染HeaderLeft
     */
    renderHeaderLeft () {
        let { leftIcon, leftText, leftIconSize, leftIconColor, leftStyle, onLeftPress, isTabBar } = this.props;
        return (
            <TouchableWithoutFeedback onPress={() => this.onLeftPress()}>
                <View style={Styles.leftContainer}>
                    {!isTabBar || leftText ?
                        (leftText ?
                            <Text style={[Styles.leftStyle, leftStyle]}>{leftText}</Text>
                            :
                            <Icon type="Feather" name='chevron-left' size={leftIconSize} color={leftIconColor} style={Styles.leftStyle}/>
                        )
                        : <View />
                    }
                </View>
            </TouchableWithoutFeedback>
        )
    }

    /**
     * 渲染HeaderTitle
     */
    renderHeaderTitle () {
        let { title, titleStyle } = this.props;
        return (
            <View style={Styles.titleContainer}>
                <Text style={[Styles.titleStyle, titleStyle]} numberOfLines={1}>{title}</Text>
            </View>
        )
    }

    /**
     * 渲染HeaderRight
     */
    renderHeaderRight () {
        let { rightIcon, rightIconSize, rightIconColor, rightText, rightStyle, onRightPress } = this.props;
        return (
            <TouchableWithoutFeedback onPress={() => onRightPress()}>
                <View style={Styles.rightContainer}>
                    {rightText ?
                        <Text style={[Styles.rightStyle, rightStyle]}>{rightText}</Text>
                        :
                        (rightIcon ?
                            <Icon type="Feather" name={rightIcon} size={rightIconSize} color={rightIconColor} style={Styles.rightStyle}/>
                            :
                            <View />
                        )
                    }
                </View>
            </TouchableWithoutFeedback>
        )
    }

    /**
     * 渲染StatusBar
     */
    renderStatusBar () {
        return (
            this.props.isStatusBarVisible ?
                <StatusBar backgroundColor={Colors.subject} barStyle={Platform.OS === 'ios' ? 'dark-content' : 'light-content'} />
                :
                <View style={{ height: Metrics.HEADER_HEIGHT }} />
        )
    }

    render () {
        return (
            // this.props.isPurecolor?
            <View style={[Styles.container, { backgroundColor: this.props.backgroundColor }, this.props.style]}>
                {this.renderStatusBar()}
                {this.renderHeaderLeft()}
                {this.renderHeaderTitle()}
                {this.renderHeaderRight()}
            </View>
            // :
            // <LinearGradient style={[Styles.container, this.props.style]} colors={['#8e8df2', '#6bb7f7']} start={{ x: 0, y: 0 }} end={{ x: 0, y: 1 }}>
            //     {this.renderStatusBar()}
            //     {this.renderHeaderLeft()}
            //     {this.renderHeaderTitle()}
            //     {this.renderHeaderRight()}
            // </LinearGradient>

        )
    }
}

const Styles = StyleSheet.create({
    container: { paddingTop: Metrics.STATUSBAR_HEIGHT, height: Metrics.HEADER_HEIGHT, width: Metrics.screenWidth, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' },
    titleContainer: { justifyContent: 'center', alignItems: 'center' },
    titleStyle: { textAlign: 'center', fontSize: 18, color: '#FFFFFF', fontWeight: 'normal', width: Metrics.screenWidth * 0.3 },
    leftContainer: { flex: 1, justifyContent: 'center', alignItems: 'flex-start', paddingLeft: 16, paddingRight: 16 },
    leftStyle: { fontSize: 18, color: '#FFFFFF', fontWeight: 'normal', padding: 2 },
    rightContainer: {  flex: 1, justifyContent: 'center', alignItems: 'flex-end', paddingLeft: 16, paddingRight: 16 },
    rightStyle: { fontSize: 18, color: '#FFFFFF', fontWeight: 'normal', padding: 2 },
});